<template>
  <div class="message" :class="[id && selectedId === id? 'selected' : '', type !== 'backBox' ? 'hover' : '']" @click.stop="changeValue">
    <!-- 有选择框 -->
    <div v-if="type === 'checkBox'" class="checkBox flex-start">
      <div class="cover"></div>
      <el-checkbox
        v-model="checkValue"
        :disabled="disabled"
      ></el-checkbox>
      <div class="avatarBox">
        <avatar :imgID="imgID" :id="id"></avatar>
        <!-- <img src="@/assets/test/nzs.png" alt="" /> -->
      </div>
      <div class="infoBox">
        <div class="title" :class="!words ? 'alone' : ''">{{ name }}</div>
        <div class="subword" v-if="words">{{ words }}</div>
      </div>
    </div>
    <!-- 带返回 -->
    <div
      v-else-if="type === 'backBox'"
      class="messageBox backBox flex-start cp hover"
    >
      <div class="navAvatar flex-start">
        <img
          class="arrow"
          src="@/assets/message/upArrow.png"
          alt=""
        />
      </div>
      <div class="infoBox">
        <div class="title" :class="!words ? 'alone' : ''">{{ name }}</div>
        <div class="subword" v-if="words">{{ words }}</div>
      </div>
    </div>
    <!-- 默认 -->
    <div
      v-else
      class="messageBox flex-start cp"
    >
      <div class="navAvatar flex-start">
        <img class="other" :src="src" alt="" v-if="src"/>
        <avatar class="other" v-else :imgID="imgID" :id="id" :fileType="fileType"></avatar>
      </div>
      <div class="infoBox addressList">
        <div class="title" :class="!words ? 'alone' : ''">{{ name }}</div>
        <div class="subword" v-if="words">{{ words }}</div>
        <p v-show="unread" class="unread">
          <span>{{ unread }}</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  props: {
    name: {
      require: String,
      default: '牛战士'
    },
    words: {
      require: String,
      default: ''
    },
    type: {
      // checkBox -> 有选择框   //navBox -> 点击后切换为箭头图标(通讯录) // address
      require: String,
      default: ''
    },
    id: {
      require: String | Number,
      default: ''
    },
    src: {
      require: Object
    },
    unread: {
      require: Number,
      default: 0
    },
    imgID: {
      require: Number
    },
    fileType: {
      require: Number,
      default: 1
    }
  },
  data () {
    return {
      checkValue: false, // 是否选中
      disabled: false, // 禁用（默认选中）
      hasClicked: false // 是否切换
    }
  },
  mounted () {
    this.disableSelect()
  },
  computed: {
    // 用于通讯录导航栏状态选中
    selectedId () {
      let id = 0
      if (!this.type) {
        if (this.$store.state.addressList.current_navId) {
          id = this.$store.state.addressList.current_navId
        } else {
          id = this.$store.state.conference.current_navId
        }
      }
      return id
    },
    current_contact () {
      return this.$store.state.chatInformation.current_contact
    },
    ...mapState('groups', ['addType', 'currentList', 'selectedList'])
  },
  methods: {
    changeValue () { // 选择
      if (this.type === 'navBox' || this.disabled) return
      this.checkValue = !this.checkValue
      this.$emit('selectUser', { user_name: this.name, user_id: this.id }, this.checkValue)
    },
    unselect () { // 取消选择 用于
      this.checkValue = false
    },
    // 禁用/默认选中
    disableSelect () {
      // 创建群聊时自己一定在内
      if (this.tools.isSelf(this.id)) {
        this.disabled = this.tools.isSelf(this.id)
        this.checkValue = this.tools.isSelf(this.id)
      } else {
        switch (this.addType) {
          case 0:
            this.checkValue = this.selectedList.some(item => item.user_id === this.id)
            break
          case 1:
            this.disabled = this.current_contact.id === this.id
            this.checkValue = this.disabled
            break
          case 2:
            this.disabled = this.currentList.some(item => item.user_id === this.id)
            this.checkValue = this.selectedList.some(item => item.user_id === this.id)
            break
          case 3:
            this.disabled = this.$store.state.conference.reserveCfData.selectedList.some(item => item.user_id === this.id)
            this.checkValue = this.selectedList.some(item => item.user_id === this.id)
            break
          case 4:
            this.disabled = this.$store.state.conferenceRoom.cf_members.some(item => item.id === this.id) || this.$store.state.conferenceRoom.cf_invited.some(item => item.id === this.id)
            this.checkValue = this.disabled
            break
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.hover{
    &:hover {
    background: rgba(48, 78, 236, 0.03);
  }
}
.message {
  padding: 8px 0;
  // background-color: springgreen;
  .backBox{
    padding-left: 16px;
    .alone{
      font-size: 18px !important;
    }
  }
  .messageBox {
    .navAvatar {
      margin-right: 12px;
      img {
        width: 40px;
        height: 40px;
      }
      .other {
        width: 36px;
        height: 36px;
      }
      .arrow {
        width: 18px;
        height: 18px;
        transform: rotateZ(-90deg);
      }
    }
    .avatarBox {
      width: 40px;
      height: 40px;
      margin-right: 12px;
    }
    .infoBox {
      width: 293px;
      position: relative;
      .title {
        height: 20px;
        font-size: 14px;
        color: #0D172C;
        line-height: 20px;
        margin-bottom: 5px;
        font-weight: 500;
      }
      .alone {
        height: 40px;
        line-height: 40px;
        margin-bottom: 0;
      }
      .subword {
        height: 17px;
        font-size: 12px;
        color: #5f7196;
        line-height: 17px;
      }
      .unread {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        height: 14px;
        span {
          position: absolute;
          height: 200%;
          line-height: 28px;
          font-size: 20px;
          color: #fff;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%) scale(0.5);
          padding: 0 8px;
          background-color: #FF3E6D;
          border-radius: 14px;
        }
      }
    }
    .addressList {
      .alone {
        height: 36px;
        line-height: 36px;
        margin-bottom: 0;
      }
    }
  }
  .checkBox {
    padding-left: 16px;
    position: relative;
    cursor: pointer;
    .cover {
      width: 20px;
      height: 20px;
      background-color: transparent;
      position: absolute;
      z-index: 99;
    }
    .avatarBox {
      margin-left: 20px;
      margin-right: 12px;
      width: 40px;
      height: 40px;
    }
    .infoBox {
      width: 170px;
      position: relative;
      .title {
        height: 20px;
        font-size: 14px;
        color: #0D172C;
        line-height: 20px;
        margin-bottom: 5px;
      }
      .alone {
        height: 40px;
        line-height: 40px;
        margin-bottom: 0;
      }
      .subword {
        height: 17px;
        font-size: 12px;
        color: #5f7196;
        line-height: 17px;
      }
    }
  }
}
.selected{
  background-color: rgba(48, 78, 236,0.05);
}
</style>
